.music_icon {
  border: 2px solid #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  text-align: center;
  background-size: 100%;
  position: absolute;
  z-index: 10;
  text-decoration: none;
  color: #fff;
  font-size: 27px; }
  .music_icon * {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }
  .music_icon .music_line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border: 1px solid #fff;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    display: none; }
  .music_icon .music_hint {
    position: absolute;
    border-radius: 6px;
    font-size: 12px;
    white-space: pre;
    right: 0;
    padding: 5px 10px;
    color: rgba(54, 29, 26, 0.58);
    border: 1px solid #cccccc;
    background: #fff;
    line-height: 20px; }
    .music_icon .music_hint .music_triangle {
      display: block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: -6px;
      right: 20px;
      border-top: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right-color: transparent;
      border-bottom-color: transparent;
      -webkit-transform: rotate(50deg);
              transform: rotate(50deg);
      background: #fff; }
  .music_icon.music_start {
    -webkit-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite; }
    .music_icon.music_start .music_line {
      display: none; }
    .music_icon.music_start .music_hint {
      display: none; }
  .music_icon.music_stop {
    -webkit-animation: none;
            animation: none; }
    .music_icon.music_stop .music_line {
      display: block; }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@font-face {
  font-family: 'icon_cy';
  src: url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.eot");
  src: url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.woff2") format("woff2"), url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.woff") format("woff"), url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.ttf") format("truetype"), url("//at.alicdn.com/t/font_1234450_7sbwm32f0vv.svg#icon_cy") format("svg"); }

.icon_cy {
  font-family: icon_cy; }
